<template>
  <div class="comment-pop">
    <van-field
      class="post-field"
      v-model.trim="message"
      rows="2"
      autosize
      type="textarea"
      maxlength="50"
      placeholder="请输入留言"
      show-word-limit
    />
    <van-button class="post-btn" @click="addComment" :disabled="!message.length">发布</van-button>
  </div>
</template>

<script>
// 导入发表评论的api
import { sendComment } from '@/assets/api/comment'
// 导入通信组件
import eventHub from '@/assets/utils/communication'

export default {
  name: 'CommentPop',
  components: {},
  props: {
    target: {
      type: [Number, String, Object],
      required: true
    },
    art_id: {
      type: [Number, String, Object],
      default: () => null
    }
  },
  data() {
    return {
      message: '',
      // 发表评论的请求产数
      sendCommentbody: {
        target: '',
        content: '',
        // 回复评论时使用
        // 不是的时候必须为空
        art_id: ''
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    async addComment() {
      // 在组件中必须通过调用$toast
      // toast只能展示一个，下一个开启上一个结束
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        // 调为0是会一直展示
        duration: 0
      })
      // 将文本值赋值给请求体
      this.sendCommentbody.content = this.message
      this.sendCommentbody.target = this.target
      this.sendCommentbody.art_id = this.art_id
      try {
        // 发起axios请求
        var { data: res } = await sendComment(this.sendCommentbody)
      } catch {
        // 处理请求错误
        this.$toast.fail('发表失败')
        return this.$toast('发表评论失败请稍后再试')
      }
      // 发表成功提示
      this.$toast.success('发布成功')
      // 完成后清空文本框的内容
      this.message = ''
      // 请求完成，告知父组件请求完成
      this.$emit('okSend')
      // 请求完成添加评论
      eventHub.$emit('addComment', res.data.new_obj)
    }
  }
}
</script>

<style scoped lang="less">
.comment-pop {
  display: flex;
  align-items: center;
  padding: 32px 0 32px 32px;
  .post-field {
    background-color: #f5f7f9;
  }
  .post-btn {
    width: 150px;
    border: none;
    padding: 0;
    color: #6ba3d8;
    &::before {
      display: none;
    }
  }
}
</style>
